<template>
  <a-layout-sider :theme="sideTheme" :class="['side-menu', 'beauty-scroll', isMobile ? null : 'shadow']"
    :width="this.menuDataChildren.children ? '264px' : '110px'" :collapsible="collapsible" v-model="collapseds"
    :trigger="null">
    <div v-if="collapsed" style="text-align:center;padding:12px 0 12px">
      <img style="width:36px;" src="../../assets/img/logo.png">
    </div>
    <a-row v-if="!collapsed" style="height:100%;overflow: hidden;">
      <a-col class="menu_left" :span="this.menuDataChildren.children ? 10 : 24"
        style="height:100%;overflow-y: auto;padding-bottom: 51px;">
        <div style="text-align:center;padding:12px 0 8px">
          <!-- <router-link to="/home"> -->
          <img style="width:36px;" src="../../assets/img/logo.png" />
          <div style="margin-top:8px;color: #333333;height: 24px;line-height:24px;font-size: 12px;">{{ systemName }}
          </div>
          <!-- </router-link> -->
        </div>

        <a-menu :selectedKeys="selectedKeys" mode="inline" :inline-collapsed="collapsed" @click="menuDataClick">
          <template v-for="(item) in menuData">
            <a-menu-item v-if="!item.meta.invisible" :key="item.fullPath">
              <i style="margin-right:8px;" :class="'iconfont ' + item.meta.icon" />
              <span v-if="item.name === '套餐/卡'">{{ item.name }}</span>
              <span v-else>{{ item.name.substring(0, 3) }}</span>
            </a-menu-item>
          </template>
        </a-menu>
      </a-col>
      <a-col class="menu_right" :span="this.menuDataChildren.children ? 14 : 0" v-if="this.menuDataChildren.children">
        <div class="menu_children" v-for="item  in this.menuDataChildren.children" :key="item.fullPath">
          <a-divider>{{ item.name }}</a-divider>
          <a-menu style="width:100%;" :selectedKeys="selectedKeysChildren" mode="inline" :inline-collapsed="collapsed"
            @click="menuDataChildrenClick">
            <a-menu-item style="margin: 3px 8px;" v-for="c_item  in item.children" :key="c_item.fullPath">
              <span>{{ c_item.name }}</span>
            </a-menu-item>
          </a-menu>
        </div>
      </a-col>
    </a-row>
    <i-menu v-if="collapsed" :theme="theme" :collapsed="collapsed" :options="menuData" @select="onSelect"
      class="menu fix_menu" />
    <div style="width:110px;" class=" toggle ">
      <div @click="toggleCollapsed">
        <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" :style="`margin-left:${collapsed ? 17 : 9}px`" />
      </div>
    </div>
  </a-layout-sider>
</template>
<script>
import IMenu from './menu'
import { repeatNum } from '@/utils/util.js'
import { mapState } from 'vuex'
export default {
  name: 'SideMenu',
  components: { IMenu },
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menuData: {
      type: Array,
      required: true
    },
    theme: {
      type: String,
      required: false,
      default: 'dark'
    }
  },
  computed: {
    sideTheme () {
      return this.theme === 'light' ? this.theme : 'dark'
    },
    collapseds () {
      return this.collapsed
    },
    ...mapState('setting', ['isMobile', 'systemName'])
  },
  data () {
    return {
      repeatNum,
      selectedKeys: ['/home'],
      selectedKeysChildren: ['/home'],
      menuDataChildren: {}
    }
  },
  watch: {

    menuDataChildren: {
      handler () {
        this.$emit('childrenLehgth', (!!this.menuDataChildren.children))
      },
      deep: true
    }

  },
  mounted () {
    console.log(this.menuData, '=============')
    if (repeatNum(this.$route.fullPath, '/') === 1) {
      this.selectedKeys = [this.$route.fullPath]
    } else {
      this.menuDataChildren = this.menuData.find(ele => {
        return ele.fullPath === ('/' + this.$route.fullPath.split('/')[1])
      })
      this.selectedKeys = [('/' + this.$route.fullPath.split('/')[1])]
      this.selectedKeysChildren = [this.$route.fullPath.split('?')[0]]
    }
  },
  methods: {
    menuDataClick ({ item, key, keyPath }) {
      this.menuDataChildren = this.menuData.find(ele => {
        return ele.fullPath === key
      })
      this.selectedKeys = [key]
      if (key !== this.$route.fullPath && key === '/home') {
        this.$router.push({
          path: key
        })
      }
    },
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    },
    menuDataChildrenClick ({ item, key, keyPath }) {
      if (this.$route.fullPath.split('?')[0] !== key) {
        this.selectedKeysChildren = [key]
        this.$router.push({
          path: key
        })
      }
    },

    toggleCollapsed () {
      this.$emit('toggleCollapse')
    }
  }
}
</script>

<style lang="less" scoped>
@import "index";
</style>

<style lang="less" scoped>
.side-menu {
  position: relative;
}

.toggle {
  color: #C0C4CC;
  position: absolute;
  padding: 15px;
  bottom: 0;
  // border-top: 1px solid Silver;
  width: 100%;
  background: #f7f8fa;

  i {
    transition: margin-left 100ms ease-out 0ms
  }
}

.toggles {
  color: #d9d9d9;
  position: absolute;
  padding: 15px;
  bottom: 0;
  // border-top: 1px solid Silver;
  width: 100%;
  background-color: #fff;

  i {
    transition: margin-left 100ms ease-out 0ms
  }
}

.menu_children {
  &:first-child{
    margin-top: 20px;
  }
  /deep/ .ant-divider {
    // padding: 0 30px;
    padding-right: 50px;
    padding-left: 10px;
    margin: 10px 0;

    .ant-divider-inner-text {
      padding: 0 10px;
      color: #999999;
      font-size: 12px;
    }

    &.ant-divider-with-text-center {
      &::before,&::after {
        border-color:#979797;
      }

    }
  }
}
</style>
